<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>outline-style</title>
<style type="text/css">
div { width: 100px; margin: 100px; padding: 10px; border: 3px solid #333; outline-width: 10px; outline-color: #f00; }
div.none { outline-style: none; }
div.dotted { outline-style: dotted; }
div.dashed { outline-style: dashed; }
div.solid { outline-style: solid; }
div.double { outline-style: double; }
div.groove { outline-style: groove; }
div.ridge { outline-style: ridge; }
div.inset { outline-style: inset; }
div.outset { outline-style: outset; }
</style>
</head>
<body>
<h1>outline-style: none;</h1>
<div class="none">注意边框线外面的红色轮廓</div>
<h1>outline-style: dotted;</h1>
<div class="dotted">注意边框线外面的红色轮廓</div>
<h1>outline-style: dashed;</h1>
<div class="dashed">注意边框线外面的红色轮廓</div>
<h1>outline-style: solid;</h1>
<div class="solid">注意边框线外面的红色轮廓</div>
<h1>outline-style: double;</h1>
<div class="double">注意边框线外面的红色轮廓</div>
<h1>outline-style: groove;</h1>
<div class="groove">注意边框线外面的红色轮廓</div>
<h1>outline-style: ridge;</h1>
<div class="ridge">注意边框线外面的红色轮廓</div>
<h1>outline-style: inset;</h1>
<div class="inset">注意边框线外面的红色轮廓</div>
<h1>outline-style: outset;</h1>
<div class="outset">注意边框线外面的红色轮廓</div>
</body>
</html>
